List Scroller

Description

List scrollers allow you to quickly navigate to a particular record in a List.

You can drag on the scroller in much the same way that you drag on the 'thumb' portion of a scrollbar in a desktop application. When you stop dragging on the scroller, the corresponding row in the List is brought into view.

Watch Video

Download Component

While you are dragging on the scroller, a message is displayed showing what record would be shown if you were to stop dragging. The contents of the message is completely customizable. It is actually a standard HTML List template and it supports all of the template features for List controls. The message can display fields from the data in the List.

The List scroller is particularly useful for virtualized Lists because a virtualized List can contain a very large number of rows. Using the scroller you can quickly navigate to any row in the List without having to drag scroll one screen at a time.

However, List scrollers are not limited to virtualized Lists. They can also be used with non-virtualized Lists.

(See below for information on Virtualized Lists).

To turn on the List scroller, check the 'Has scroller' property on the List Properties pane in the List builder.

You can use placeholders for any field in the List in the template.

Dynamically Displaying the List Scroller

You can dynamically show/hide the scroller for a List control. This is useful if you are dynamically populating the List and under some circumstances that are so few rows in a List that the scroller is not wanted, but in other cases there will be many rows in the List and the scroller would be wanted. The List's .setDisplay() method is used for this as follows:

var lObj = {dialog.object}.getControl('myList');

if (lObj) {
    // assume flag is a true/false value calculated before getting
    // a pointer to the List object for 'myList'

    if (flag) {
        // if flag is true, we want to hide the scroller
        lObj.setDisplay('scroller',false); //hide
    } else {
        // otherwise, we want to show the scroller
       lObj.setDisplay('scroller',true); //show
    }
}

Other parts of the list that can be controlled with the .setDisplay() method are:

column-header
content-header
content-footer
header
footer
scroller